$(function () {
    // 菜单导航特效
    $('.cate-content').on('mouseenter', '.nav-li', function () {
        $('.cat2').show()
 
        let index = $(this).index()
        $('.cat2>div').hide()
        $('.cat2>div').eq(index).show()
    })
    $('.cate-content').on('mouseleave', function () {
        $('.cat2').hide()
        $('.cat2>div').hide()
    })

    // 菜单导航接口数据
    let icons = [
        'icon-canju',
        'icon-meituan',
        'icon-jiudian',
        'icon-jiudian',
        'icon-dianying-',
        'icon-feiji',
        'icon-maikefeng',
        'icon-icon',
        'icon-chuitoufa',
        'icon-qinzi2',
        'icon-gangling',
        'icon-pinleitubiao_jiazhuangjiancai',
        'icon-xuexi',
        'icon-zhuanshi',
        'icon-tubiao_-',
        'icon-jiubajiulang',
    ]
    $.get('/api/cate/tree.jsp',{},res=>{
      let html = ''
      $.each(res.data,(index,item)=>{
        //过滤确定一级标签a标签跳转网页 加上id
        let url = item.url || `./waimai.html?cat_id=${item.cat_id}`
        // html拼接 图表管理  hot图标显示
        html+=` <li class="nav-li">
              <i class="iconfont ${icons[index]}"></i>
              <span class="nav-text-wrapper"></span>
                  <a href="${url}" class="link nav-text" target="_blank">${item.cat_name}</a>
                  ${item.cat_name==='外卖'? '<span class="nav-promotion">HOT</span>' : ''}
                  <i class="nav-right-arrow"></i>
            </li>
            `
      })
      $('.cat1 ul').html(html)

      // 二级、三级
      // 清空二级菜单
      $('.cat2').text('')
      let oneHtml = ''
      // 遍历造onehtml
      $.each(res.data,(index,item)=>{
        let twoHtml = ''
        // 遍历，造twoHtml
        $.each(item.children,(twoIndex,twoItem)=>{
          // 跳转链接
          let url = item.url || `./waimai.html?id=${twoItem.cat_id}`
          let threeHtml = ''
          // 遍历，造threeHtml
          $.each(twoItem.children,(threeIndex,threeItem)=>{
            threeHtml+=`
              <a href="./waimai.html?id=${threeItem.cat_id}" class="link detail-text" target="_blank">${threeItem.cat_name}</a>
            `
          })

          twoHtml+=`
          <div class="detail-area">
              <div class="detail-title-wrapper clearfix">
                <h2>
                  <a href="${url}" class="link detail-title" target="_blank">${twoItem.cat_name}</a>
                </h2>
                <a href="${url}" class="link detail-more" target="_blank">更多<i class="detail-right-arrow"></i></a>
              </div>

              <!-- 三级 -->
              <div class="detail-content">
                ${threeHtml}
              </div>
              <!-- 三级 -->
          </div>
          `
          
        })
       
        oneHtml=` <div class="category-nav-detail">
            <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
            ${twoHtml || '<img src="./imgs/cate404.webp"'}
            <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
          </div>`
          // 填充到网页中
        $('.cat2').append(oneHtml)
      })
    },'json')
})
